<template>
  <div class="app-container" style="width: 90%">
    <div class="topHead">
      活动类型
    </div>
    <el-divider />
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      highlight-current-row
      @current-change="clickChange"
    >
      <el-table-column label="选择" width="55">
        <template slot-scope="scope">
          <el-radio v-model="tableRadio" :label="scope.row"><i /></el-radio>
        </template>
      </el-table-column>
      <el-table-column
        align="left"
        type="index"
        label="序号"
        width="60"
      />
      <el-table-column
        prop="prize"
        label="奖项"
        min-width="40"
        style="color: #5daf34"
      />
      <el-table-column
        prop="weights"
        label="总权重"
        width="180"
      />
      <el-table-column label="奖项条件" align="left">
        <el-table-column
          prop="requirements"
          label="条件"
          min-width="40"
        >
          <template slot-scope="scope">
            <a @click="requirementClick(scope.row)">{{ scope.row.requirements }}</a>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          label="操作"
          min-width="20"
          style="text-align: center"
        >
          <template slot-scope="scope" style="text-align: center">
            <!-- 查看+编辑+删除 -->
            <i class="el-icon-view table-operation" style="color: #87d068;" @click="handleView(scope.$index, scope.row)" />
            <i v-if=" true ||(scope.row.auditState==='未审批') || (scope.row.auditState==='退回') " class="el-icon-edit table-operation" style="color: #2db7f5;" @click="handleEdit(scope.row)" />
            <i v-if=" true||(scope.row.auditState==='未审批') || (scope.row.auditState==='退回') " class="el-icon-delete table-operation" style="color: #f50;" @click="handleDelete(scope.$index, scope.row)" />
          </template>
        </el-table-column>
      </el-table-column>
      <el-table-column
        prop="remarks"
        label="备注"
        min-width="20"
      />
      <el-table-column
        align="center"
        fixed="right"
        label="操作"
        min-width="20"
        style="text-align: center"
      >
        <template slot-scope="scope" style="text-align: center">
          <!-- 查看+编辑+删除 -->
          <i class="el-icon-view table-operation" style="color: #87d068;" @click="handleView(scope.$index, scope.row)" />
          <i v-if=" true ||(scope.row.auditState==='未审批') || (scope.row.auditState==='退回') " class="el-icon-edit table-operation" style="color: #2db7f5;" @click="handleEdit(scope.row)" />
          <i v-if=" true||(scope.row.auditState==='未审批') || (scope.row.auditState==='退回') " class="el-icon-delete table-operation" style="color: #f50;" @click="handleDelete(scope.$index, scope.row)" />
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      tableRadio: '',
      dialog: {
        isVisible: false,
        title: ''
      },
      tableData: [{
        prize: '学业 - 国家级 - 国家奖学金',
        weights: '0.8',
        requirements: '条件——1',
        remarks: '备注示范'
      }, {
        prize: '学业 - 国家级 - 国家奖学金',
        weights: '0.6',
        requirements: '条件——2',
        remarks: '备注示范'
      }, {
        prize: '学业 - 国家级 - 国家奖学金',
        weights: '0.7',
        requirements: '条件——3',
        remarks: '备注示范'
      }, {
        prize: '学业 - 国家级 - 国家奖学金',
        weights: '0.2',
        requirements: '条件——4',
        remarks: '备注示范'
      }]
    }
  },
  computed: {},
  mounted() {
  },
  methods: {

    clickChange(item) {
      this.tableRadio = item
    },
    requirementClick(row) {
      // this.$refs.edit.setIndexs(row)
      // this.dialog.title = this.$t('common.edit')
      // this.dialog.isVisible = true
      console.log(row)
    },
    requirementsEdit(row) {
      this.dialog
    },
    handleView(row) {
      // this.$refs.edit.setIndexs(row)
      // this.dialog.title = this.$t('common.edit')
      // this.dialog.isVisible = true
      console.log('hanleView')
    },
    handleEdit(row) {
      // this.$refs.edit.setIndexs(row)
      // this.dialog.title = this.$t('common.edit')
      // this.dialog.isVisible = true
      console.log('hanleEdit')
    },
    handleDelete(row) {
      // this.$refs.edit.setIndexs(row)
      // this.dialog.title = this.$t('common.edit')
      // this.dialog.isVisible = true
      console.log('hanleDelete')
    }
  }
}
</script>

<style lang="scss" scoped>
.topHead {
  font-size: 20px;
  font-weight: bolder;
  color: #706c6c;
  text-align: left;
}
</style>
